<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/webjars/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1 style="text-align: center">粉丝列表</h1>
        </div>
    </div>
<div th:replace="common/modal::#detialModal"></div>
    <div class="col-md-3">
        <h2>
            总粉丝:<span th:text="${total}"></span> <br/>
            当前页粉丝:<span th:text="${count}"></span>

        </h2>
        <div class="thumbnail">
            <img src="..." alt="..." th:src="${qrcode}" th:alt="二维码" id="qrcode">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="javascript:show()" class="btn btn-primary" role="button">显示</a>
                    <a href="javascript:hide()" class="btn btn-default" role="button">隐藏</a></p>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序列</th>
                <th>openId</th>
                <th>昵称</th>
                <th>图像</th>
                <th>性别</th>
                <th>地区</th>
                <th>关注时间</th>
                <th colspan="2">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="user,vs:${userList}">
                <td th:text="${vs.index+1}">1</td>
                <td th:text="${user.openid}"></td>
                <td th:text="${user.nickname}"></td>
                <td><img th:src="${user.headimgurl}" th:width="30px" th:height="25"/></td>
                <td th:if="${user.sex==1}" th:text="'男'"></td>
                <td th:if="${user.sex==2}" th:text="'女'"></td>
                <td th:if="${user.sex==0}" th:text="'未知'"></td>
                <td th:text="${user.country}+' '+${user.province + ' ' +user.city}"></td>
                <!-- <td th:text="${#dates.format(${user.subscribe_time},'yyyy-MM-dd HH:mm:ss')}">2020-8-5 10:50:58</td>-->
                <td th:text="${#dates.format((user.subscribe_time)*1000L,'yyyy-MM-dd HH:mm:ss')}">2020-8-5 10:50:58</td>
                <td><a class="btn btn-primary btn-xs" th:href="@{'/user/toMsg?openid='+${user.openid}}">发送消息</a></td>
                <td><a th:href="@{'/user/findByOpenId?openid='+${user.openid}}" class="btn btn-danger btn-xs">详情</a></td>
            </tr>
            </tbody>


        </table>
    </div>

</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    function show() {
        $("#qrcode").show();
    }

    function hide() {
        $("#qrcode").hide();
    }
    $(function () {
        $('.btn-danger').on('click',function () {
            $('#detialModal').modal();
        })
    });
</script>
</body>
</html>